<template>
  <div>
    <div id="cardhgth">
      <Card>
        <div slot="title">
          <div class="edit-head">
            <a @click="goBack" class="back-title">
              <Icon type="ios-arrow-back" />返回
            </a>
          </div>
        </div>

        <el-descriptions
          class="margin-top"
          title="个人信息"
          :column="5"
          size="medium"
          border
        >
          <el-descriptions-item>
            <template slot="label">发起时间： </template>
            {{ information.createTime }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">工单编号： </template>
            {{ information.consultingNo }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">用户名称： </template>
            <span v-if="information.type == 1">
              {{ information.name }}
            </span>
            <span v-else-if="information.type == 2" >
              {{ information.name }}
            </span>
            <span v-else>
              {{ information.name }}
            </span>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">手机号：</template>
            {{ information.phone }}
          </el-descriptions-item>
          f
          <el-descriptions-item>
            <template slot="label">工单状态： </template>
            <span
              :style="{
                color:
                  information.handleState == 1
                    ? 'red'
                    : information.handleState == 2
                    ? '#21C38F'
                    : information.handleState == 3
                    ? '#B0C4DE'
                    : '',
              }"
            >
              {{
                information.handleState == 1
                  ? "待处理"
                  : information.handleState == 2
                  ? "处理中"
                  : information.handleState == 3
                  ? "已完结"
                  : ""
              }}
            </span>
          </el-descriptions-item>

          <el-descriptions-item>
            <template slot="label">问题类型： </template>
            {{ information.problemType }}
          </el-descriptions-item>
          <el-descriptions-item v-if="this.$route.query.seetest == 1">
            <template slot="label">运单编号：</template>
            <span
              @click="waybillNo"
              style="color: #08c; cursor: pointer"
              v-if="information.orderNo != '' && information.orderNo != null"
            >
              {{ information.orderNo }}
            </span>
            <span v-else style="color: #b0c4de"> 无关联运单 </span>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">服务评分： </template>
            <Rate
              class="Ratecss"
              allow-half
              disabled
              v-model="information.level"
            />
          </el-descriptions-item>
          <!-- 投诉订单 -->
        </el-descriptions>

        <!-- 时间线 -->
        <div style="margin: 14px 5px 0"></div>
        <div>
          <span class="personal_size"> 工单信息 </span>
        </div>

        <Row>
          <Col span="14">
            <div class="timecss" id="dialogue_box" v-if="dataNos">
              <!-- <div v-show="dataNo">
                <el-timeline>
                  <el-timeline-item> 暂无数据 </el-timeline-item>
                </el-timeline>
              </div> -->
              <el-timeline>
                <div>
                  <!-- 客服 -->
                  <el-timeline-item
                    placement="top"
                    v-for="(activity, index) in activities"
                    :key="index"
                    :icon="activity.icon"
                    :type="activity.type"
                    :color="activity.color"
                    :size="activity.size"
                  >
                    <div class="timeline_card">
                      <div>
                        <div v-if="activity.type == 2">
                          <el-card>
                            <span style="display: flex">
                              <span class="customerImg">
                                <img src="@/assets/customkefu.png" alt="" />
                              </span>
                              <span class="createTimecss">{{
                                activity.createTime
                              }}</span>
                            </span>
                            <span>
                              <span style="text-indent: 2em; width: 95%">
                                {{
                                  activity.describes == "undefined"
                                    ? "未填写"
                                    : activity.describes
                                }}</span
                              >
                            </span>
                            <div style="display: flex" class="box-timelineimg">
                              <span
                                class="timelineimg"
                                v-for="serviceImg in activity.activitiesimg"
                                :key="serviceImg"
                              >
                                <img
                                  :src="serviceImg"
                                  @click="showPic(serviceImg)"
                                  style="
                                    width: 100%;
                                    height: 100%;
                                    cursor: pointer;
                                  "
                                />
                              </span>
                            </div>
                          </el-card>
                        </div>
                        <!-- 用户 -->
                        <div v-else>
                          <el-card>
                            <span style="display: flex">
                              <!-- <span class="wzfont">{{ information.name }}</span> -->
                              <span class="customerImg">
                                <img src="@/assets/customer.png" alt="" />
                              </span>
                              <span class="createTimecss">{{
                                activity.createTime
                              }}</span>
                            </span>
                            <span>
                              <span style="text-indent: 2em; width: 95%">
                                {{
                                  activity.describes == "undefined"
                                    ? "未填写"
                                    : activity.describes
                                }}</span
                              >
                            </span>
                            <div style="display: flex" class="box-timelineimg">
                              <span
                                class="timelineimg"
                                v-for="serviceImg in activity.activitiesimg"
                                :key="serviceImg"
                              >
                                <img
                                  :src="serviceImg"
                                  @click="showPic(serviceImg)"
                                  style="
                                    width: 100%;
                                    height: 100%;
                                    cursor: pointer;
                                  "
                                />
                              </span>
                            </div>
                          </el-card>
                        </div>
                      </div>
                      <div></div>
                    </div>
                  </el-timeline-item>
                </div>
              </el-timeline>
            </div>
            <!-- 暂无数据 -->
            <div class="timecss" id="dialogue_box" v-if="dataNobox">
              <el-timeline>
                <el-timeline-item>
                  <div class="box"></div>

                  <el-card> <span> 暂无数据</span> </el-card>
                </el-timeline-item>
              </el-timeline>
            </div>
          </Col>
          <!-- 点击查看回复图片       -->
          <Modal title="" v-model="compla">
            <img :src="complaintModal" v-if="compla" style="width: 100%" />
            <div slot="footer"></div>
          </Modal>
          <Col span="10">
            <div v-if="information.handleState != '3'" class="replycss">
              <!-- 边框线 -->
              <div
                style="
                  border: 1.3px solid gainsboro;
                  padding: 3px;
                  border-radius: 5px;
                  height: 300px;
                "
              >
                <!-- 输入框 -->
                <Input class="replyinptu" border:="false" v-model="huifuContent"
                placeholder="请输入回复内容" type="textarea" :rows="4"
                :autosize="{ minRows: 7, maxRows: 8 }" />
                <!-- 上传图片 -->
                <div class="uploadcss">
                  <div
                    class="demo-upload-list"
                    v-for="item in uploadList"
                    :key="item"
                  >
                    <!-- v-if="item.status === 'finished'" -->
                    <template>
                      <div>
                        <img :src="item.url" alt="" />
                      </div>
                      <div class="demo-upload-list-cover">
                        <Icon
                          type="ios-eye-outline"
                          @click.native="handleView(item.url)"
                        ></Icon>
                        <Icon
                          type="ios-trash-outline"
                          @click.native="handleRemove(item)"
                        ></Icon>
                      </div>
                    </template>
                    <!-- <template v-else>
                      <Progress
                        v-if="item.showProgress"
                        :percent="item.percentage"
                        hide-info
                      ></Progress>
                    </template> -->
                  </div>
                  <!-- userId: userId, orderId: orderId, -->
                  <Upload
                    :disabled="false"
                    ref="upload"
                    :show-upload-list="false"
                    :default-file-list="defaultList"
                    :on-success="handleSuccess"
                    :format="['jpg', 'jpeg', 'png']"
                    :max-size="20480"
                    :on-format-error="handleFormatError"
                    :on-exceeded-size="handleMaxSize"
                    :before-upload="handleBeforeUpload"
                    :headers="header"
                    type="drag"
                    :action="uploadConsultingId"
                    style="display: inline-block; width: 58px"
                  >
                    <div style="width: 58px; height: 58px; line-height: 58px">
                      <Icon type="ios-camera" size="20"></Icon>
                    </div>
                  </Upload>
                  <Modal title="" v-model="visible">
                    <img :src="imgName" v-if="visible" style="width: 100%" />
                    <div slot="footer"></div>
                  </Modal>
                </div>
                <!-- 边框线 -->
              </div>
              <!-- 回复按钮 -->
              <div style="display: flex; justify-content: space-between">
                <div class="send_burs">
                  <Button
                    size="default"
                    style="width: 80px; height: 33px"
                    type="primary"
                    :loading="loadingSend"
                    @click="ReplyContent"
                    >发送</Button
                  >
                </div>
                <div class="send_burs">
                  <Button
                    size="default"
                    style="width: 80px; height: 33px"
                    type="error"
                    :loading="loadingEnd"
                    @click="endDatModal"
                    >结束</Button
                  >
                </div>
              </div>
            </div>
          </Col>
        </Row>
        <div>
          <!--评价  -->
          <Modal :mask-closable="false" v-model="evaluateModal" width="360">
            <p slot="header" style="color: #f60; text-align: center">
              <Icon type="ios-information-circle"></Icon>
              <span>请对本次服务打分</span>
            </p>
            <div>
              <div style="text-align: center">
                <Rate class="consultRate" show-text v-model="valueText" />
              </div>
            </div>
            <div slot="footer">
              <Button
                size="default"
                style="width: 80px; height: 33px"
                type="primary"
                :loading="loadingSubmission"
                @click="submission"
                >提交</Button
              >
            </div>
          </Modal>
        </div>
      </Card>
    </div>
    <!-- 驾驶员详情   -->
    <DriverDetails
      @DriverDetaEnd="DriverDetaEnd"
      :BidderdUserId="BidderdUserId"
      :driverModalue="this.driverModalue"
    >
    </DriverDetails>
    <!-- 货主详情 -->
    <OwnerDetails
      @OwnerDetaiEnd="OwnerDetaiEnd"
      :OwnerDetailsId="OwnerDetailsId"
      :OwnerDetailsModalue="this.OwnerDetailsModalue"
    >
    </OwnerDetails>
  </div>
</template>

<script>
import {
  saveMsgConsultingrecord,
  saveMsgComplaintRecord,
  endMsgConsulting,
  endMsgComplaint,
  getMsgComplaintList,
  getMsgServiceConsultingList,
} from "@/api/index";
import DriverDetails from "@/views/componentsonn_source_goods/DriverDetails";
import OwnerDetails from "@/views/componentsonn_source_goods/OwnerDetails";
import * as imageConversion from "image-conversion";
import { getStore, setStore } from "@/libs/storage";
import { uploadConsultingPicId, uploadComplaintPicId } from "@/api/index";
import {
  getmsgConsultingIdList, //获取咨询问题详细处理记录
  getmsgComplaintIdList, //获取投诉详细处理记录
  msgComplaintevaluate,
  msgConsultingevaluate,
} from "@/api/ownerEnd/personalCenter";

export default {
  data() {
    return {
      BidderdUserId: "", //报价人Id
      driverModalue: false, //驾驶员详情弹框

      OwnerDetailsId: "", //货主Id
      OwnerDetailsModalue: false, //货主详情弹框

      evaluateModal: false,
      customerImg: [],
      complaintimg: [],
      uploadData: "",
      uploadConsultingId: uploadConsultingPicId,
      loadingSubmission: false,
      html: "",
      endDate: false,
      header: {
        "content-type": "multipart/form-data",
        accessToken: getStore("accessToken"),
      },
      accessToken: getStore("accessToken"),
      activities: [],
      huifuContent: "",
      defaultList: [],
      imgName: "",
      visible: false,
      uploadList: [],
      consulting: "",
      information: "",
      questions: {
        pageNumber: 1, // 当前页数
        pageSize: 10, // 页面大小
        sort: "createTime", // 默认排序字段
        order: "desc", // 默认排序方式
      },
      fileall: "",
      seetest: "",
      compla: false,
      valueText: "",
      dataNos: true,
      dataNobox: false,
      loadingSend: false,
      loadingEnd: false,
    };
  },
  components: {
    DriverDetails,
    OwnerDetails,
  },
  mounted() {
    this.uploadConsultingId = uploadComplaintPicId;
    this.uploadList = this.$refs.upload.fileList;
    this.seetest = this.$route.query.seetest;
    this.information = JSON.parse(this.$route.query.data);
    this.activities = JSON.parse(this.$route.query.activities);
    this.init();
    this.updated();
    if (this.$route.query.seetest == 2) {
      // 咨询
      this.complaintList();
      this.tingrecord();
    } else {
      // 投诉
      this.serviceList();
      this.Recoder();
    }
  },
  methods: {
    init() {
      let form = {
        pageNumber: this.$route.query.page,
        pageSize: 10,
      };
      if (this.$route.query.seetest == 2) {
        // 咨询
        getMsgServiceConsultingList(form).then((res) => {
          let dataArr = res.result.content;
          dataArr.forEach((item) => {
            if (item.id == this.information.id) {
              this.information = item;
            }
          });
          this.$nextTick(() => {
            if (
              this.information.handleState == 3 &&
              this.information.level == 0
            ) {
              this.evaluateModal = true;
            }
          });
        });
      } else {
        // 投诉
        getMsgComplaintList(form).then((res) => {
          let dataArr = res.result.content;
          dataArr.forEach((item) => {
            if (item.id == this.information.id) {
              this.information = item;
            }
          });
        });
        this.$nextTick(() => {
          if (
            this.information.handleState == 3 &&
            this.information.level == 0
          ) {
            this.evaluateModal = true;
          }
        });
      }
    },
    // 打分
    submission() {
      if (!this.valueText) {
        return this.$Message.warning("请为本次服务打分");
      }
      if (this.$route.query.seetest == 2) {
        let data = {
          msgComplaintId: this.information.id,
          level: this.valueText,
        };
        this.loadingSubmission = true;
        msgComplaintevaluate(data).then((res) => {
          this.loadingSubmission = false;
          if (res.code == 200) {
            this.$Message.success("打分成功");
            this.evaluateModal = false;
            this.init();
          } else {
            this.$Message.error(res.message);
          }
        });
      } else {
        let data = {
          msgConsultingId: this.information.id,
          level: this.valueText,
        };
        this.loadingSubmission = true;
        msgConsultingevaluate(data).then((res) => {
          this.loadingSubmission = false;
          if (res.code == 200) {
            this.$Message.success("打分成功");
            this.evaluateModal = false;
            this.init();
          } else {
            this.$Message.error(res.message);
          }
        });
      }
    },
    updated() {
      this.$nextTick(function () {
        var p = document.getElementById("dialogue_box");
        p.scrollTop = p.scrollHeight;
      });
    },
    // 投诉
    serviceList() {
      this.uploadConsultingId = uploadComplaintPicId;
      this.uploadList = this.$refs.upload.fileList;
      this.activities.forEach((item) => {
        if (item.describePicture != "") {
          item.activitiesimg = item.describePicture.split(",");
        }
      });
      this.activities.forEach((item) => {
        if (typeof item.activitiesimg != "undefined") {
          for (let index = 0; index < item.activitiesimg.length; index++) {
            item.activitiesimg[index] =
              this.$baseUrl + item.activitiesimg[index];
          }
        }
      });
      if (
        (typeof this.activities != "undefined") &
        (this.activities.length > 0)
      ) {
        this.activities[this.activities.length - 1].color = "#21C38F";
        this.activities[this.activities.length - 1].size = "large";
        this.activities[0].color = "#696969";
        this.activities[0].size = "large";
        this.dataNos = true;
        this.dataNobox = false;
      } else {
        this.dataNos = false;
        this.dataNobox = true;
        this.activities = [];
      }
    },
    //压缩图片
    beforeUpload(file) {
      return new Promise((resolve, reject) => {
        // console.log("压缩前", file); // 压缩到400KB,大于400KB的图片都会进行压缩，小于则不会
        imageConversion.compressAccurately(file, 100).then((res) => {
          res = new File([res], file.name, {
            type: res.type,
            lastModified: Date.now(),
          });
          resolve(res);
        });
      });
    },
    // 咨询
    complaintList() {
      this.uploadConsultingId = uploadConsultingPicId;
      this.uploadList = this.$refs.upload.fileList;
      if (typeof this.activities != "undefined") {
        this.activities.forEach((item) => {
          if (item.describePicture != "") {
            item.activitiesimg = item.describePicture.split(",");
          }
        });
        this.activities.forEach((item) => {
          if (typeof item.activitiesimg != "undefined") {
            for (let index = 0; index < item.activitiesimg.length; index++) {
              item.activitiesimg[index] =
                this.$baseUrl + item.activitiesimg[index];
            }
          }
        });
      }
      if (
        (typeof this.activities != "undefined") &
        (this.activities.length > 0)
      ) {
        this.activities[this.activities.length - 1].color = "#21C38F";
        this.activities[this.activities.length - 1].size = "large";
        this.activities[0].color = "#696969";
        this.activities[0].size = "large";
        this.dataNos = true;
        this.dataNobox = false;
      } else {
        this.dataNos = false;
        this.dataNobox = true;
        this.activities = [];
      }
    },

    // 点击查看回复图片
    sendImg(tiem) {
      this.compla = true;
      this.complaintModal = tiem;
    },
    showPic(v) {
      let image = new Image();
      image.src = v;
      let viewer = new Viewer(image, {
        hidden: function () {
          viewer.destroy();
        },
      });
      viewer.show();
      // this.compla = true;
      // this.complaintModal = item;
    },
    // 结束
    endDatModal() {
      // this.loadingEnd = true;
      if (this.$route.query.seetest == 2) {
        //咨询
        this.$Modal.confirm({
          title: "确认结束",
          content: "确认结束该工单",
          loading: true,
          onOk: () => {
            endMsgConsulting({ msgConsultingId: this.information.id }).then(
              (res) => {
                this.loadingEnd = false;
                this.$Modal.remove();
                if (res.code == 200) {
                  this.$Message.success("操作成功");
                  // this.$router.push({
                  //   name: "ownerManagement/personal-center/consultationFeedback", //咨询
                  //   query: {
                  //     consulaint: this.$route.query.consulaint,
                  //     key: this.$route.query.key,
                  //     page: this.$route.query.page,
                  //   },
                  // });
                  this.evaluateModal = true;
                } else {
                  this.$Message.error(res.message);
                }
              }
            );
          },
        });
      } else {
        //投诉
        this.$Modal.confirm({
          title: "确认结束",
          content: "确认结束该工单？",
          loading: true,
          onOk: () => {
            endMsgComplaint({ msgConsultingId: this.information.id }).then(
              (res) => {
                this.loadingEnd = false;
                this.$Modal.remove();
                if (res.code == 200) {
                  this.$Message.success("操作成功");
                  this.evaluateModal = true;
                  // this.tingrecord();
                  // this.$router.push({
                  //   name: "ownerManagement/personal-center/consultingComplaints", //投诉
                  //   query: {
                  //     consulaint: this.$route.query.consulaint,
                  //     key: this.$route.query.key,
                  //     page: this.$route.query.page,
                  //   },
                  // });
                } else {
                  this.$Message.error(res.message);
                }
              }
            );
          },
        });
      }
      // this.evaluateModal = true;
    },
    // 发送信息
    ReplyContent() {
      if (this.huifuContent == "") {
        this.$Message.error("请填写内容");
        return false;
      } else if (this.uploadList.length < 0) {
        this.$Message.error("请填上传图片");
        return false;
      }
      this.loadingSend = true;
      if (this.seetest == 2) {
        // 咨询
        let param = new FormData(); // 创建form对象
        param.append("msgConsultingId", this.information.id); // 通过append向form对象添加数据
        param.append("describes", this.huifuContent); // 添加form表单中其他数据
        this.uploadList.forEach((item) => {
          param.append("file", item);
        });
        saveMsgConsultingrecord(param).then((res) => {
          this.loadingSend = false;
          if (res.code == 200) {
            this.huifuContent = "";
            this.dataNos = true;
            this.dataNobox = false;
            this.$refs.upload.clearFiles();
            this.uploadList = [];
            this.$Message.success("发送成功");
            this.tingrecord();
          } else {
            this.$Message.error(res.message);
          }
        });
      } else {
        // 投诉
        this.uploadConsultingId = uploadComplaintPicId;
        let param = new FormData(); // 创建form对象
        param.append("msgComplaintId", this.information.id); // 通过append向form对象添加数据
        param.append("describes", this.huifuContent); // 添加form表单中其他数据
        this.uploadList.forEach((item) => {
          param.append("file", item);
        });
        saveMsgComplaintRecord(param).then((res) => {
          this.loadingSend = false;
          if (res.code == 200) {
            this.dataNos = true;
            this.dataNobox = false;
            this.huifuContent = "";
            this.$refs.upload.clearFiles();
            this.uploadList = [];
            this.$Message.success("发送成功");
            this.Recoder();
          } else {
            this.$Message.error(res.message);
          }
        });
      }
    },
    // 咨询
    tingrecord() {
      let data = {
        msgConsultingId: this.information.id,
      };
      getmsgConsultingIdList(data).then((res) => {
        this.activities = res.result;
        this.activities[this.activities.length - 1].color = "#21C38F";
        this.activities[this.activities.length - 1].size = "large";
        this.activities[0].color = "#696969";
        this.activities[0].size = "large";
        this.updated();
        if (this.activities[0].describes != "") {
          this.activities.forEach((item) => {
            if (item.describePicture != "") {
              item.activitiesimg = item.describePicture.split(",");
            }
          });
          this.activities.forEach((item) => {
            if (typeof item.activitiesimg != "undefined") {
              for (let index = 0; index < item.activitiesimg.length; index++) {
                item.activitiesimg[index] =
                  this.$baseUrl + item.activitiesimg[index];
              }
            }
          });
        }
      });
    },
    // 投诉
    Recoder() {
      let data = {
        msgComplaintId: this.information.id,
      };
      getmsgComplaintIdList(data).then((res) => {
        this.activities = res.result;
        this.activities[this.activities.length - 1].color = "#21C38F";
        this.activities[this.activities.length - 1].size = "large";
        this.activities[0].color = "#696969";
        this.activities[0].size = "large";
        this.updated();
        if (this.activities[0].describes != "") {
          this.activities.forEach((item) => {
            if (item.describePicture != "") {
              item.activitiesimg = item.describePicture.split(",");
            }
          });
          this.activities.forEach((item) => {
            if (typeof item.activitiesimg != "undefined") {
              for (let index = 0; index < item.activitiesimg.length; index++) {
                item.activitiesimg[index] =
                  this.$baseUrl + item.activitiesimg[index];
              }
            }
          });
        }
      });
    },
    handleView(url) {
      let image = new Image();
      image.src = url;
      let viewer = new Viewer(image, {
        hidden: function () {
          viewer.destroy();
        },
      });
      viewer.show();
      // this.imgName = url;
      // this.visible = true;
    },
    // 删除图片
    handleRemove(file) {
      const fileList = this.$refs.upload.fileList;
      this.$refs.upload.fileList.splice(fileList.indexOf(file), 1);
    },
    uploadchange(res, file, fileList) {},
    // 成功
    handleSuccess(res, file, fileList) {
      if (res.result != null) {
        var a = res.result;
        this.enlargeImig =
          this.$baseUrl +
          "/freight/file/view/" +
          a +
          "?accessToken=" +
          this.accessToken +
          "&preview=true";
      }
      // this.uploadList.forEach((item) => {
      //   var a = item.response.result;
      //   item.url =
      //     this.$baseUrl +
      //     "/freight/file/view/" +
      //     a +
      //     "?accessToken=" +
      //     this.accessToken +
      //     "&preview=true";
      // });
    },
    // 文件格式验证失败时的钩子
    handleFormatError(file) {
      this.$Message.error("图片格式错误,指定上传图片格式 jpg、jpeg、png");
    },
    // 文件超出指定大小限制时的钩子
    handleMaxSize(file) {
      this.$Message.error("图片超出了最大存储限制");
    },
    // 上传文件之前的钩子，参数为上传的文件
    handleBeforeUpload(file) {
      const check = this.uploadList.length < 3;
      if (!check) {
        this.$Message.error("一次最多上传三张图片");
        return false;
      }
      const reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = () => {
        const _base64 = reader.result;
        file.url = _base64;
        this.uploadList.push(file);
      };
      this.uploadList = this.$refs.upload.fileList;
      this.fileall = file;
      return false;
    },
    //货主详细信息
    LookCargoOwnerInfo() {
      this.OwnerDetailsId = this.information.userId;
      this.OwnerDetailsModalue = true;
    },
    // 货主详细信息关闭
    OwnerDetaiEnd(val) {
      this.OwnerDetailsModalue = val;
      this.OwnerDetailsId = "";
    },
    // 驾驶员
    BidderdDiver() {
      // userId
      this.BidderdUserId = this.information.userId;
      this.driverModalue = true;
    },
    // 驾驶员详情关闭
    DriverDetaEnd(val) {
      this.driverModalue = val;
      this.BidderdUserId = "";
    },
    // 运单编号
    waybillNo(row) {
      this.$router.push({
        path: "/ownerDetailScarryWaybill",
        query: {
          id: JSON.parse(this.information.orderId),
          pageType: 12,
          key: this.$route.query.key,
          consulaint: this.$route.query.consulaint,
          data: this.$route.query.data,
          activities: this.$route.query.activities,
          seetest: this.$route.query.seetest,
        },
      });
    },
    // 返回
    goBack() {
      if (this.seetest == 2) {
        this.$router.push({
          name: "ownerManagement/personal-center/consultationFeedback", //咨询
          query: {
            consulaint: this.$route.query.consulaint,
            key: this.$route.query.key,
            page: this.$route.query.page,
          },
        });
      } else if (this.seetest == 1) {
        this.$router.push({
          name: "ownerManagement/personal-center/consultingComplaints", //投诉
          query: {
            consulaint: this.$route.query.consulaint,
            key: this.$route.query.key,
            page: this.$route.query.page,
          },
        });
      }
    },
  },
};
</script>

<style>
.demo-upload-list {
  display: inline-block;
  width: 60px;
  height: 60px;
  text-align: center;
  line-height: 60px;
  border: 1px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  position: relative;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  margin-right: 4px;
}
.demo-upload-list img {
  width: 100%;
  height: 100%;
}
.demo-upload-list-cover {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.6);
}
.demo-upload-list:hover .demo-upload-list-cover {
  display: block;
}
.demo-upload-list-cover i {
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  margin: 0 2px;
}
.border_card {
  margin: 5px 0;
  border: 1px dashed #a9a9a9;
}

/* .inosimg {
  height: 300px;
} */
.wzfont {
  font-weight: 600;
  font-size: 15px;
}
.spanimg {
  width: 200px;
  height: 60px;
}
.createTimecss {
  margin-top: 5px;
  margin-left: 15px;
  font-size: 14px;
  /* font-weight: 600; */
}

.timelineimg {
  margin-top: 10px;
  width: 70px;
  height: 70px;
  display: inline-block;
  margin-bottom: 5px;
  margin-left: 10px;
  border: 1px solid #eee;
  padding: 2px;
}
.box-timelineimg span:nth-child(1) {
  display: inline-block;
  margin-left: 0px;
}

.box {
  width: 100%;
  height: 10px;
}
.boxTable {
  margin-left: 15px;
}
.replycss {
  height: 59vh;
  margin-top: 26px;
  padding: 5px;
  margin-left: 13px;
}
.timecss {
  height: 59vh;
  margin-top: 10px;
  overflow: auto;
  /* margin-left: -8px; */
  padding: 10px;
}
.uploadcss {
  margin-top: 10px;
  margin-left: 15px;
  width: 300px;
  position: relative;
  bottom: -62px;
  left: -8px;
}
.send_burs {
  margin-top: 10px;
}
.personal_size {
  margin-top: 5px;
  color: #303133;
  font-size: 17px;
  font-weight: 700;
}
.timebox {
  display: flex;
}
.Consul_ent {
  width: 500px;
  height: 300px;
  border: 1px solid #eee;
}
</style>
<style lang="less" >
.el-timeline-item {
  padding-bottom: 1px;
}
.customerImg {
  width: 30px;
  height: 30px;
  margin-bottom: 8px;
  img {
    width: 100%;
    height: 100%;
  }
}

.replyinptu {
  textarea.ivu-input {
    border: 1px solid transparent;
    outline: none;
    border: none;
    box-shadow: 0 0 0 2px transparent;
    // border-bottom: 1.3px solid gainsboro;
  }
}
.el-timeline {
  .el-timeline-item__timestamp.is-bottom {
    position: absolute;
    left: -100px;
    top: -3px;
    color: #333333;
  }
  .el-timeline {
    padding-left: 150px;
  }
}
</style>
<style lang="less" scoped>
.Ratecss {
  .ivu-rate-star {
    width: 18px;
    height: 18px;
  }
}
.consultRate {
  .ivu-rate-star {
    margin-left: 10px;
  }
}
</style>